<template>
  <div class="paper">
    <div style="display: flex;align-items: center;">
      <h5>题目Id：</h5>
      <el-input v-model="id" style="width: 240px;margin:0 10px;" placeholder="题目Id" clearable size="large" />
      <h5>年级：</h5>
      <el-select v-model="level" placeholder="年级" size="large" style="width: 240px;margin:0 10px;" filterable clearable>
        <el-option label="请选择" value="" />
        <el-option v-for="item in slevel" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <h5>学科：</h5>
      <el-select v-model="subjectId" placeholder="请选择" size="large" style="width: 240px;margin:0 10px;" filterable
        clearable>
        <el-option label="请选择" value="" />
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button type="primary" size="large" @click="getList">查询</el-button>
      <el-button type="primary" size="large" @click="router.push('addpaper')">添加</el-button>
    </div>

    <el-table :data="tableDataWithSubject" border style="width: 100%">
      <el-table-column prop="id" label="Id" />
      <el-table-column prop="subjectName" label="学科" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="change(scope.row.id)">编辑</el-button>
          <el-button type="danger" @click="dele(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div style="display: flex; align-items: center;height: 60px;">
    <span>共{{ total }}条</span>
    <div style="margin: 0 20px;">
      <el-select v-model="pageSize" placeholder="Select" size="small" style="width: 100px" @change="handleSizeChange">
        <el-option v-for="item in psize" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"
      :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 50]" :page-size="pageSize" />
    <div style="display: flex;width: 150px;justify-content: center;align-items: center;">
      <span style="display: flex;width: 60px;justify-content: center;align-items: center;">前往</span><el-input
        v-model.lazy="currentPage" class="center-input" style="width: 50px;" /><span style="margin-left: 15px;">页</span>
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { get, subject, del } from "@/api/paper"
import type { AxiosResponse } from 'axios';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter();

type listType = {
  createTime: string,
  createUser: number,
  frameTextContentId: number,
  id: number,
  name: string,
  paperType: number,
  questionCount: number,
  score: number,
  subjectId: number
}[]
type optionsType = {
  deleted: boolean,
  id: number,
  itemOrder: number,
  level: number,
  levelName: string,
  name: string,
}[]
interface ApiResponse<T> {
  code: number;
  message: string;
  response: {
    total: number;
    list: T
  };
}
let options = ref<optionsType>([])
let tableData = ref<listType>([]);
let subjectId = ref()
let total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const level = ref()
const id = ref()
const psize = ref([
  { label: '共5条', value: 5 },
  { label: '共10条', value: 10 },
  { label: '共20条', value: 20 },
  { label: '共30条', value: 30 },
  { label: '共40条', value: 40 },
  { label: '共50条', value: 50 }
])
const slevel = ref([
  { label: '一年级', value: 1 },
  { label: '二年级', value: 2 },
  { label: '三年级', value: 3 },
  { label: '四年级', value: 4 },
  { label: '五年级', value: 5 },
  { label: '六年级', value: 6 },
  { label: '初一', value: 7 },
  { label: '初二', value: 8 },
  { label: '初三', value: 9 },
  { label: '高一', value: 10 },
  { label: '高二', value: 11 },
  { label: '高三', value: 12 },
])
const handleCurrentChange = (page: number) => {
  currentPage.value = page
  getList()
}
// 每页条数变化时触发
const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1 // 重置为第一页
  getList()
}
function dele(id: number) {
  del(id).then(res => {
    if (res.status === 200) {
      ElMessage.success('删除成功')
      getList()
    }
  })
}
function change(id: number) {
  router.push({
    path: 'addpaper',
    query: { id: id }
  })
}
watch(currentPage, (newValue, oldValue) => {
  if (!newValue) {
    currentPage.value = oldValue
  } else {
    currentPage.value = newValue;
    getList()
  }

});
function getList() {
  subject().then(res => {
    if (res.data.code === 1) {
      options.value = res.data.response
    }
  })
  const data = {
    id: id.value,
    level: level.value,
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
    subjectId: subjectId.value
  }
  get(data).then((res: AxiosResponse<ApiResponse<listType>>) => {
    if (res.data.code === 1) {
      tableData.value = res.data.response.list
      total.value = res.data.response.total
    }
  })
}
const tableDataWithSubject = computed(() => {
  return tableData.value.map(paper => {
    const subject = options.value.find(s => s.id === paper.subjectId)
    const subjectName = subject ? `${subject.name}(${subject.levelName})` : '未知学科'
    return { ...paper, subjectName }
  })
})

getList()
onMounted(() => {

})

</script>

<style scoped>
::v-deep .center-input .el-input__inner {
  text-align: center;
}
</style>